<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import {registerApi} from '@/api/user.js'
import { useRoute,useRouter } from 'vue-router';
import { getCodeApi } from '@/api/user.js';
const route = useRoute()
const router = useRouter() 
  //参数校验绑定的对象
  const registerForm = reactive({
    username:'',
    password:'',
    email:'',
    code:''
  })
    //校验规则
    const registerFormRules = {
    //用户名规则
    username:[
        {
            require:true,
            message:'用户名不能为空',
            trigger:'blur'
        },
        {
            min:6,
            max:20,
            message:'用户名长度在6-20之间',
            trigger:'blur'
        }
    ],
    //密码规则
    password:[
        {
            require:true,
            message:'密码不能为空',
            trigger:'blur'
        },
        {
            min:6,
            max:16,
            message:'密码长度在6-16之间',
            trigger:'blur'
        }
    ],
       //邮箱/手机号 规则
    email:[
        {
            require:true,
            message:'邮箱/手机号不能为空',
            trigger:'blur'
        },
        {
            min:6,
            max:30,
            message:'长度应在6-30之间',
            trigger:'blur'
        }
    ],
    //验证码
    code:[
        {
            require:true,
            message:'验证码不能为空',
            trigger:'blur'
        }
    ]
  }
  
  const registerFormRef = ref(null)

  //注册请求
  const onRegister = ()=>{
      //整体校验
      registerFormRef.value.validate(async(valid)=>{
        if(!valid){
            ElMessage({
                message:'请检查输入内容',
                type:'error',
                plain:true
            })
            return
        }
        try{
            const resp = await registerApi(registerForm)
            if(resp.data.code === 200){
                ElMessage.success('注册成功！')
                //跳转到登录界面
                router.push('login')
            }    
        }catch(e){
            console.log(e)
            ElMessage.error(e.response.data.msg)
        }
    })
  }
//-------------------获取验证码----------
const showTime = ref(false)
const time = ref(Date.now()+ 1000 * 60 * 5)
const forbit = ref(false)
const getCode =async ()=>{
    if(registerForm.email === ''){
        ElMessage.warning('请输入邮箱！')
        return
    }
    const inputEmail = registerForm.email
    //校验邮箱格式是否正确
    const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (reg.test(inputEmail)){
        try{
            const resp = await getCodeApi(registerForm.email)
            console.log(resp)
            if(resp.data.code === 200){
                time.value = Date.now()+ 1000 * 60 * 5
                showTime.value = true
                forbit.value = true
                ElMessage.success('验证码已经发送注意查收！')
            }
        }catch(e){
            console.log(e)
            ElMessage.error(e.response.data.msg)
            return
        }
    }else {
        ElMessage.warning('邮箱格式不正确，请重新输入')
        return
    }
}

const reNew = async()=>{
    const time = ref(Date.now()+ 1000 * 60 * 5)
    forbit.value = false
    showTime.value = false
}
</script>
<template>
       <div class="register-box">
        <el-card>
            <template #header>
                <div class="card-header">
                    <h2>用户注册</h2>
                </div>
            </template>
            <el-form 
            ref="registerFormRef"
            :rules="registerFormRules"
            :model="registerForm">
                <el-form-item prop="username">
                    用户名：
                    <el-input 
                    type="text"
                    v-model="registerForm.username"
                    placeholder="请填写用户名" 
                    clearable
                    prefix-icon="User" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    密码：
                    <el-input 
                    v-model="registerForm.password"
                    type="password"
                    placeholder="请填写密码" 
                    show-password
                    clearable
                    prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item prop="email">
                    邮箱：
                    <el-input 
                    v-model="registerForm.email"
                    type="text"
                    placeholder="请填写邮箱/手机号" 
                    clearable
                    prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item class="code-box" prop="code">
                    验证码：
                    <el-input 
                    v-model="registerForm.code"
                    type="text"
                    placeholder="请填写验证码" 
                    clearable
                    prefix-icon="Lock"></el-input>
                    <el-button 
                    :disabled="forbit"
                    @click="getCode">获取验证码</el-button>
                </el-form-item>
                <!-- 倒计时 -->
                <el-countdown
                  v-if="showTime"
                  @finish="reNew"
                  :value="time"
                  format="mm:ss"
                  suffix="秒后重新发送"/>
                
                <el-form-item>
                    <el-button type="primary" 
                    @click="onRegister">注册</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
    .register-box{
    display: flex;
    justify-content: center;
    align-content: center; 
    background-image: linear-gradient(to right, #f2c4e5, #b2caf4);
    width: 100vw;
    height: 100vh;
    .el-card{
        width: 40vw;
        height: 80vh;
        margin-top: 100px;
        :deep(.el-card__header){
            display: flex;
            align-content: center;
            justify-content: center;
            height: 60px;
            background: var( --el-color-primary) ;
            color: white;
            text-align: center;
            h2{
                font-size: 16px;
                font-weight: 400px;
            }
        }
        .el-form{
            padding: 15px 25px;
            .el-form-item:nth-child(2){
                 margin: 40px 0;
            }
            .el-input{
                height: 45px;
            }
            .el-button{
                height: 35px;
            }
            .code-box{
                .el-button{
                    color: #b2caf4;
                }
            }
        }

    }
  } 
</style>